<template>
  <div class="h-full w-full">
    <!-- 报表 -->
    <ReportTable
      :type="type"
      ref="reportTableRef"
      v-show="type == 'list'"
      @changeType="handleChange"
      @changeDetail="handleOpenDetail"
    />
    <!-- 飞单失败明显 -->
    <FailTable :type="type" ref="failTableRef" v-show="type == 'fail'" @changeType="handleChange" />
    <!-- 飞单失败明显 -->
    <DetailTable
      :pid="pid"
      :type="type"
      ref="detailTableRef"
      v-show="type == 'detail'"
      @changeType="handleChange"
    />
  </div>
</template>
<script setup lang="ts">
import ReportTable from "./report-table.vue";
import FailTable from "./fail-table.vue";
import DetailTable from "./detail-table.vue";

const reportTableRef = ref();
const failTableRef = ref();
const detailTableRef = ref();
const type = ref<"list" | "detail" | "fail">("list");
const pid = ref<number | null>(null);

const handleChange = (t: "list" | "detail" | "fail") => {
  type.value = t;
  console.log(t);
  if (t == "list") {
    pid.value = null;
  }
  if (t == "fail") {
    failTableRef.value?.getData();
  }
};
const handleOpenDetail = (id: number) => {
  pid.value = id;
  nextTick(() => {
    type.value = "detail";
    detailTableRef.value?.getData();
  });
};
</script>
